<template>
  <u-modal
    v-model="showModal"
    :show-confirm-button="false"
    :show-title="false"
    contentBg="transparent"
    class="bank-modal"
    :negative-top="showPwd ? 400 : 0"
  >
    <view class="modal-box">
      <view class="modal-header">
        <image
          v-if="mode == '1'"
          class="modal-bg"
          :src="`https://minio.wskjwl.com/app/driver/modal-bg1.png`"
        />
        <image
          v-if="mode == '2'"
          class="modal-bg"
          :src="`https://minio.wskjwl.com/app/driver/modal-bg2.png`"
        />
      </view>
      <view class="modal-container">
        <view class="modal-title">{{ title }}</view>
        <view class="modal-desc">{{ desc }}</view>
        <slot></slot>
        <view class="modal-footer" v-if="showFooter">
          <view class="modal-cancel-btn" v-if="showCancel" @click="cancel">{{
            cancelText
          }}</view>
          <view class="modal-confirm-btn" v-if="showConfirm" @click="confirm">{{
            confirmText
          }}</view>
        </view>
      </view>
    </view>
  </u-modal>
</template>

<script>
import { imgUrl } from 'common/httpEnum'
export default {
  data() {
    return {
      imgUrl,
    }
  },
  props: {
    showModal: {
      type: Boolean,
      default: false,
    },
    showPwd: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: '1',
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '提示',
    },
    desc: {
      type: String,
      default: '',
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    showConfirm: {
      type: Boolean,
      default: true,
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    confirmText: {
      type: String,
      default: '确认',
    },
  },
  methods: {
    handleHide() {
      this.$emit('hide')
    },
    cancel() {
      this.$emit('cancel')
    },
    confirm() {
      this.$emit('confirm')
    },
  },
}
</script>

<style lang="scss" scoped>
.modal {
  &-box {
    position: relative;
    align-items: center;
    width: 591rpx;
    height: 523rpx;
  }
  &-header {
    width: 591rpx;
    height: 252rpx;
  }
  &-bg {
    width: 591rpx;
    height: 252rpx;
  }
  &-container {
    position: relative;
    margin-top: -1rpx;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 271rpx;
    background: #fff;
    box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
    border-radius: 0rpx 0rpx 20rpx 20rpx;
  }
  &-title {
    position: relative;
    font-size: 42rpx;
    font-weight: 500;
    color: #333333;
    line-height: 59rpx;
    margin-top: -59rpx;
    margin-bottom: 20rpx;
    z-index: 2;
    text-align: center;
  }
  &-desc {
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
  }
  &-footer {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30rpx;
  }
  &-cancel-btn {
    flex: 1;
    // width: 240rpx;
    height: 80rpx;
    background: #f6f6f6;
    border-radius: 8rpx;
    margin-right: 20rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
  }
  &-confirm-btn {
    flex: 1;
    // width: 240rpx;
    height: 80rpx;
    background: #178dff;
    border-radius: 8rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    color: #fff;
    text-align: center;
  }
}
</style>
